<template>
  <view :data-theme="theme">
    <view class='sign'>
      <view class='header'>
        <view class="title mb30 flex">连续签到
          <view @click="toInfo()">
            <text class="iconfont icon-shuoming"></text>
          </view>
        </view>
        <view class='list acea-row row-center row-bottom'>
          <view class='item bg_color'>{{ signCount[0] || 0 }}</view>
          <view class='item bg_color'>{{ signCount[1] || 0 }}</view>
          <view class='item bg_color'>{{ signCount[2] || 0 }}</view>
          <view class='item bg_color'>{{ signCount[3] || 0 }}</view>
          <view class='data'>天</view>
        </view>
        <view class="acea-row row-center-wrapper">
          <view class='tip acea-row row-center-wrapper'>
            <image src="../static/images/jinbi.png"></image>
            <view>{{ '今日签到+' + integral + '积分，+' + experience + '经验' }}</view>
          </view>
        </view>
        <navigator hover-class='none'
                   url='/pages/merchant/user_sgin_list/index'>
          <view class="record">
            签到记录
            <text class="iconfont icon-xiangyou"></text>
          </view>
        </navigator>
      </view>

      <signCalendar :yearMonth="targetDate" :dataSource="signData" @dateChange="getSignInfo"
                    @clickChange="clickSign">
      </signCalendar>
    </view>
    <view class='signTip acea-row row-center-wrapper' :class='active==true?"on":""'>
      <view class='signTipLight loadingpic'></view>
      <view class='signTipCon'>
        <view class="signTipBox"></view>
        <view class='state'>签到成功</view>
        <view class='integral'>获得{{ integral }}积分，{{ experience }}经验</view>
        <view class='signTipBnt' @click='close'>好的</view>
      </view>
    </view>
    <view class='mask' @touchmove.stop.prevent="false" :hidden='active==false'></view>
  </view>
</template>

<script>
import {
  toLogin
} from '@/libs/login.js';
import {
  mapGetters
} from "vuex";
import signCalendar from '../components/signCalendar/index.vue';
import Cache from '@/utils/cache';
import {
  signInfo
} from '@/api/user.js';
import {
  setFormId
} from '@/api/api.js';

let app = getApp();
export default {
  data() {
    return {
      active: false,
      theme: app.globalData.theme,
      targetDate: parseInt(new Date().getFullYear()) + "-" + parseInt(new Date().getMonth() + 1), //本月
      sumCount: 0,
      signData: [],
      signCount: [],
      integral: 0,
      experience: 0,
      month: '',
      preMoth: ''
    }
  },
  watch: {
    month(newVal) {
      let pre = Number(this.month)
      if (pre < 10) {
        this.preMoth = '0' + pre
      } else {
        this.preMoth = pre
      }
      let next = Number(this.month) + 1
      if (next > 12) {
        this.nextMoth = '0' + 1
      } else if (next < 10) {
        this.nextMoth = '0' + next
      } else {
        this.nextMoth = next
      }
    }
  },
  onLoad: function (options) {
    uni.showLoading({
      title: "加载中",
      mask: true,
    });
    let now = new Date()
    this.year = now.getFullYear()
    let month = now.getMonth() + 1
    let pre = Number(month)
    if (pre < 10) {
      this.month = '0' + pre
    } else {
      this.month = pre
    }
    this.getSignInfo(this.year + '-' + this.month);
  },
  components: {
    signCalendar
  },
  methods: {
    clickSign(day) {
      this.signData.push(day);
      this.sumCount++
    },
    /**
     * 关闭签到提示
     */
    close: function () {
      this.active = false;
    },
    /**
     * 数字分割为数组
     * @param int num 需要分割的数字
     * @param int length 需要分割为n位数组
     */
    PrefixInteger: function (num, length) {
      return (Array(length).join('0') + num).slice(-length).split('');
    },
    /**
     * 获取签到页信息
     */
    getSignInfo: function (month) {
      signInfo({
        month: month
      }).then(res => {
        uni.hideLoading();
        let data = res.data;
        this.signData = data.signDateList
        this.signCount = this.PrefixInteger(data.signDayNum, 4);
        this.integral = data.integral;
        this.experience = data.experience;
        Cache.set('signRule', data.signRule);
        if (data.isTip) this.active = true;
      }).catch(err => {
        uni.hideLoading();

      });
    },
    toInfo() {
      uni.navigateTo({
        url: `/pages/users/user_sgin_info/index`
      })
    }
  }

}
</script>

<style scoped lang="scss">
.signTip {
  width: 644rpx;
  height: 645rpx;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -322rpx;
  margin-top: -322.5rpx;
  z-index: 99;
  text-align: center;
  transition: all 0.3s ease-in-out 0s;
  opacity: 0;
  transform: scale(0);

  .signTipLight {
    background-image: url('');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .signTipCon {
    background-image: url('');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 420rpx;
    height: 420rpx;
    margin-top: -700rpx;
    position: relative;

    .state {
      font-size: 34rpx;
      color: #fff;
      margin-top: 150rpx;
    }

    .integral {
      font-size: 30rpx;
      color: rgba(255, 255, 255, 0.6);
      margin-top: 9rpx;
    }

    .signTipBnt {
      font-size: 30rpx;
      @include main_color(theme);
      width: 260rpx;
      height: 76rpx;
      @include second-gradient(theme);
      border-radius: 38rpx;
      line-height: 76rpx;
      margin: 48rpx auto 0 auto;
    }
  }
}

.on {
  opacity: 1;
  transform: scale(1);
}

.signTipBox {
  @include main_bg_color(theme);
  height: 360rpx;
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: -1;
}

.sign {
  .header {
    width: 100%;
    height: 542rpx;
    background: url('') no-repeat;
    background-size: 100% 100%;
    @include main_bg_color(theme);
    padding-top: 60rpx;
  }

  .title {
    color: #FFFFFF;
    font-size: 30rpx;
    text-align: center;
    justify-content: center;

    .icon-shuoming {
      font-size: 30rpx;
      margin-left: 12rpx;
    }
  }

  .tip {
    margin-top: 50rpx;
    height: 50rpx;
    line-height: 50rpx;
    color: #fff;
    background-color: #FFB22D;
    box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.1);
    border-radius: 27rpx;
    opacity: 1;
    padding: 0 17rpx;

    image {
      width: 28rpx;
      height: 28rpx;
      margin-right: 5rpx;
    }
  }
}

.icon-xiangyou {
  font-size: 22rpx;
}

.record {
  position: absolute;
  display: flex;
  align-items: center;
  top: 40rpx;
  right: 0;
  color: #FFDDB8;
  font-size: 22rpx;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 8rpx 18rpx;
  border-radius: 20px 0px 0px 20px;
}

.list {
  .item {
    width: 80rpx;
    height: 116rpx;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    @include main_color(theme);
    font-size: 72rpx;
    font-weight: bold;
    text-align: center;
    line-height: 116rpx;
    margin-right: 19rpx;
    border-radius: 8rpx;
    background-image: url('');
  }

  .data {
    font-size: 30rpx;
    color: #fff;
  }
}
</style>
